<template>
  <el-row>
    <el-col :span="6">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="page.coverImage" class="image" />
      </el-card>
    </el-col>
    <el-col :span="18" class="info">
      <div class="title">{{page.title}}</div>
      <div>
        <el-rate
          v-model="score"
          disabled
          text-color="#ff9900"
          show-score
          :score-template="page.score/10+''"
        ></el-rate>
      </div>
      <p class="author">作者: &nbsp; {{page.author}}</p>
      <p class="tip">
        <span class="block">
          状态：
          <span>{{updateStatus}}</span>
        </span>

        <span class="block" v-if="page.tagList!=null">
          题材：
          <a href="/manhua-maoxian/ " v-for="(tag,index) in page.tagList" :key="index">
            <span>{{tag.udxName}}</span>
          </a>
        </span>
      </p>

      <p class="content">简介: &nbsp;{{page.info}}</p>

      <div class="operate">
        <el-button :type="collect?'info':'warning'" @click="collectClick">{{collect?'已收藏':"收藏漫画"}}</el-button>
        <el-button type="danger" @click="read">{{page.chapterCount>0?'开始阅读':'尚未更新'}}</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  computed: {
    page() {
      return this.$store.state.work.info;
    },
    score() {
      return this.page.score / 10 / 2;
    },
    updateStatus() {
      return this.page.endStatus == 0 ? "连载中" : "完结";
    },
    collect() {
      return this.$store.state.work.collect;
    },
    isLogin() {
      return this.$store.state.user.current != null;
    }
  },
  methods: {
    read(){
      if(this.page.chapterCount>0){
        this.$router.push("/work/"+this.$route.params.id+"/chapter/1")
      }
    },
    async collectClick() {
      if (this.isLogin) {
        try {
          let { status, data } = await this.$axios.post(
            "/api/collect/" + this.page.id
          );

          this.$store.commit("work/collect", data);
        } catch (error) {
          console.log(error);
        }
      } else {
        this.$notify.warning({
          title: "错误",
          message: "您还尚未登录"
        });
      }
    }
  }
};
</script>

<style scoped>
.image {
  width: 100%;
  height: 400px;
}

.info {
  padding: 20px 20px;
}
.title {
  font-size: 30px;
  color: #252525;
  padding-bottom: 10px;
}
.author {
  font-size: 13px;
  color: #666;
}
.block {
  font-size: 13px;
  color: #777;
  margin-right: 20px;
}
.block a,
.block span {
  text-decoration: none;
  color: #444;
}
.content {
  width: 80%;
  color: #444;
  font-size: 14px;
}
</style>